<template>
  <div id="friends">
    <el-container class="friends-page">
      <el-aside width="280px" class="friends-list-box">
        <div class="friends-list-header">
          <el-input class="search-text" placeholder="搜索">
            <i class="el-icon-search el-input__icon" slot="prefix"> </i>
          </el-input>
        </div>
        <!-- <div class="chat-list-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
          element-loading-spinner="el-icon-loading" element-loading-background="#eee">
          <div class="chat-loading-box"></div>
        </div> -->
        <el-scrollbar style="flex: 1;">
          <span class="friendsAll">工作组</span>
          <div class="friend-list-items">
            <div v-for="(group, index) in filteredGroups" :key="index">
              <friend-item :index="index" :active="group === activeGroup" @chat="onSendMessage(group)" :friend="group"
                @delete="onDelItem(group, index)" @click.native="onActiveGroup(group, index)">
              </friend-item>
            </div>
          </div>
          <span class="friendsAll">联系人</span>
          <div class="friend-list-items">
            <div v-for="(friend, index) in filteredFriends" :key="index">
              <friend-item :index="index" :active="friend === activeFriend" @chat="onSendMessage(friend)"
                :friend="friend" @delete="onDelItem(friend, index)" @click.native="onActiveItem(friend, index)">
              </friend-item>
            </div>
          </div>
        </el-scrollbar>



        <!-- <el-scrollbar>
          <div v-for="(group, index) in filteredGroups" :key="index">
            <group-item v-show="!group.quit && group.showGroupName.includes(searchText)" :group="group"
              :active="group === activeGroup" @click.native="onActiveItem(group, index)" :friends="friends" />
          </div>
        </el-scrollbar> -->
        <!-- 
        <el-scrollbar class="chat-list-items">
          <div v-for="(chat, index) in filteredChats" :key="chat.id">
            <chat-item v-show="chat.showName.includes(searchText)" :chat="chat" :index="index"
              @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
              :active="chat === chatStore.activeChat" />
          </div>
        </el-scrollbar> -->
      </el-aside>
      <el-container class="friend-box" v-if="activeFriend">
        <div class="friend-header">
          {{ activeFriend.nickName }}
        </div>
        <div>
          <div class="friend-detail">
            <head-image :size="200" :name="activeFriend.nickName" :url="activeFriend.headImage"
              @click.native="showFullImage()"></head-image>
            <div>
              <div class="info-item">
                <el-descriptions title="联系人信息" class="description" :column="1">
                  <el-descriptions-item label="用户名">{{ activeFriend.userName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="昵称">{{ activeFriend.nickName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="性别">{{ activeFriend.sex == 0 ? "男" : "女" }}</el-descriptions-item>
                  <el-descriptions-item label="签名">{{ activeFriend.signature }}</el-descriptions-item>
                </el-descriptions>

              </div>
              <div class="frient-btn-group">
                <el-button v-show="activeFriend.isFriend" icon="el-icon-position" type="primary"
                  @click="onSendMessage(activeFriend)">发消息</el-button>
                <el-button v-show="!activeFriend.isFriend" icon="el-icon-plus" type="primary"
                  @click="onAddFriend(activeFriend)">加为好友</el-button>
                <el-button v-show="activeFriend.isFriend" icon="el-icon-delete" type="danger"
                  @click="onDelItem(activeFriend, activeIdx)">删除好友</el-button>
              </div>
            </div>
          </div>
          <!-- <el-divider content-position="center"></el-divider> -->

        </div>
      </el-container>

      <el-container class="group-box" v-if="activeGroup">
        <div class="group-header">
          {{ activeGroup.showGroupName }}({{ groupMembers.length }})
        </div>
        <el-scrollbar class="group-container">
          <div>
            <div class="group-info">
              <div>
                <head-image :size="200" :name="activeGroup.showGroupName" :url="activeGroup.headImage"
                  @click.native="showFullImage()"></head-image>
                <el-button class="send-btn" icon="el-icon-position" type="primary"
                  @click="onSendMessage()">发消息</el-button>
              </div>
              <el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules" ref="groupForm">
                <el-form-item label="工作组名称" prop="name">
                  <el-input v-model="activeGroup.showGroupName" :disabled="!isOwner" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="组长">
                  <el-input :value="ownerName" disabled></el-input>
                </el-form-item>
                <el-form-item label="工作组备注">
                  <el-input v-model="activeGroup.remarkGroupName" :placeholder="activeGroup.name"
                    maxlength="20"></el-input>
                </el-form-item>
                <!-- <el-form-item label="我在本工作组的昵称"> -->
                  <!-- :placeholder="$store.state.userStore.userInfo.nickName" -->
                  <!-- <el-input v-model="activeGroup.remarkNickName" maxlength="20"></el-input>
                </el-form-item> -->
                <el-form-item label="工作组公告">
                  <el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea" maxlength="1024"
                    placeholder="组长未设置"></el-input>
                </el-form-item>
                <div>
                  <el-button type="success" @click="onSaveGroup()">保存</el-button>
                  <el-button type="danger" v-show="!isOwner" @click="onQuit()">退出工作组</el-button>
                  <el-button type="danger" v-show="isOwner" @click="onDissolve()">解散工作组</el-button>
                </div>
              </el-form>
            </div>
            <el-divider content-position="center"></el-divider>
            <!-- 群成员 -->
            <div class="group-member-list">
              <div v-for="(member) in groupMembers" :key="member.id" class="groupME">
                <head-image class="group-member" :id="member.userId" :name="member.showNickName" :url="member.headImage"
                  :size="50" :online="member.online">
                  <div v-if="showDel" @click.stop="onDelete()" class="btn-kick el-icon-error"></div>
                </head-image>
                <div class="member-name">{{ member.showNickName }}</div>
                <!-- <group-member v-show="!member.quit" class="group-member" :member="member"
									:showDel="isOwner&&member.userId!=activeGroup.ownerId" @del="onKick"></group-member> -->
              </div>
              <div class="group-invite">
                <div class="invite-member-btn" title="邀请好友进工作组" @click="onInviteMember()">
                  <i class="el-icon-plus"></i>
                </div>
                <div class="invite-member-text">邀请</div>
                <!-- <add-group-member :visible="showAddGroupMember" :groupId="activeGroup.id"
									:members="groupMembers" @reload="loadGroupMembers"
									@close="onCloseAddGroupMember"></add-group-member> -->
              </div>
            </div>
          </div>
        </el-scrollbar>

      </el-container>

    </el-container>
  </div>
</template>

<script>
import HeadImage from "@/components/HeadImage.vue";
import FriendItem from '@/components/friends/FriendItem.vue.vue';
export default {
  components: { FriendItem, HeadImage, },
  name: 'FriendsView',
  data () {
    return {
      showDel: false,//添加群友
      searchText: '', // 搜索内容
      isFriendList: true, // 当前是否是好友列表
      activeFriend: null, // 当前选中的好友
      // activeGroup: null, // 当前选中的群组
      // 模拟的好友数据
      friends: [
        { nickName: 'John Doe', id: 1, headImage: require('../../assets/common/portrait.jpeg'), sex: 0, signature: '赤胆忠诚，献身理想，党旗高扬永不褪色。', isFriend: true },
        { nickName: 'Jane Smith', id: 2, headImage: require('../../assets/common/portrait.jpeg'), sex: 1, signature: "", isFriend: true },
        { nickName: 'Paul Brown', id: 3, headImage: require('../../assets/common/portrait.jpeg'), sex: 0, signature: '永远跟党走，民族复兴在我手；永远爱祖国，个人梦想在党心。', isFriend: false },
      ],
      // 模拟的工作组数据
      groups: [
        { showGroupName: '安保交流群', remarkGroupName: '科技讨论组', remarkNickName: '小李', notice: '欢迎加入科技交流群！', quit: false, id: 1, headImage: require('../../assets/common/portrait.jpeg'), },
        { showGroupName: '技术交流群', remarkGroupName: '技术讨论组', remarkNickName: '小王', notice: '欢迎加入技术交流群！', quit: false, id: 2, headImage: require('../../assets/common/portrait.jpeg'), },
        { showGroupName: '工作交流群', remarkGroupName: '工作讨论组', remarkNickName: '小赵', notice: '欢迎加入工作交流群！', quit: false, id: 3, headImage: require('../../assets/common/portrait.jpeg'), },
      ],
      groupMembers: [
        { userId: 1157, showNickName: "某某老师", remarkNickName: "", headImage: "", quit: false, online: true },
        { userId: 799, showNickName: "黄老师", remarkNickName: "", headImage: "", quit: false, online: false },
        { userId: 3422, showNickName: "2088581407", remarkNickName: "", headImage: "", quit: false, online: true },
        { userId: 26, showNickName: "小霖", remarkNickName: "", headImage: "https://www.boxim.online/file/box-im/image/20241014/1728882008796.jpg", quit: false, online: false }
      ],
      // 当前工作组数据
      activeGroup: null,
      // 群主信息
      ownerName: '张总',
      // 是否是群主
      isOwner: true,
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '工作组名称不能为空', trigger: 'blur' },
          { max: 20, message: '工作组名称不能超过20个字符', trigger: 'blur' }
        ],
        remarkGroupName: [
          { max: 20, message: '群名备注不能超过20个字符', trigger: 'blur' }
        ],
        remarkNickName: [
          { max: 20, message: '昵称不能超过20个字符', trigger: 'blur' }
        ]
      }
      // userInfo:{
      //   id:1,
      // }
    }
  },
  computed: {
    // 过滤后的好友列表
    filteredFriends () {
      return this.friends.filter(friend => friend.nickName.includes(this.searchText));
    },
    // 过滤后的群组列表
    filteredGroups () {
      return this.groups.filter(group => !group.quit && group.showGroupName.includes(this.searchText));
    },
  },
  methods: { // 保存工作组设置
    onSaveGroup () {
      this.$message.success('工作组设置已保存');
      // 在此进行保存逻辑
    },
    // 退出工作组
    onQuit () {
      this.$message.warning('您已退出工作组');
      // 退出工作组的逻辑
    },
    // 解散工作组
    onDissolve () {
      this.$message.warning('工作组已解散');
      // 解散工作组的逻辑
    },

    // 处理点击某个好友的事件
    onSendMessage (friend) {
      console.log('Sending message to:', friend);
    },
    // 处理删除好友的事件
    onDelItem (friend, index) {
      this.friends.splice(index, 1); // 删除好友
    },
    // 处理激活好友项的事件
    onActiveItem (friend, index) {
      this.activeGroup = "";
      this.activeFriend = friend;
      console.log('Activated friend:', friend);
      console.log(index);

    },
    // 处理激活群组项的事件
    onActiveGroup (group, index) {
      this.activeFriend = "";
      this.activeGroup = group;
      console.log('Activated group:', group);
      console.log(index);

    },
  },
}
</script>

<style lang="scss" scoped>
#friends {
  width: 100%;
}
::v-deep .el-scrollbar__wrap{
  overflow: scroll;
  height: 100%;
}
.friends-page {
  height: 100%;

  .friends-list-box {
    display: flex;
    flex-direction: column;
    border-right: #53a0e79c solid 1px;
    background: white;
    width: 3rem;

    .friends-list-header {
      padding: 5px 8px;
      line-height: 50px;
      border-bottom: 1px #ddd solid;
      box-sizing: border-box;
    }

    .friendsAll {
      // background-color: #eee;
      color: #919191;
      font-size: 15px;
      padding: 5px 15px;
      font-weight: 700;
    }

    .friend-list-items {
      margin: 0 3px;
      background: #F8F8F8;
    }
  }

  .friend-box {
    display: flex;
    flex-direction: column;

    .friend-header {
      padding: 3px;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      background-color: white;
      border-bottom: 1px #ddd solid;
    }

    .friend-detail {
      display: flex;
      padding: 50px 80px 20px 80px;
      text-align: center;


      .info-item {
        margin-left: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        border: 1px #ddd solid;
      }

      .description {
        padding: 20px 20px 0px 20px;
      }
    }

    .frient-btn-group {
      text-align: left !important;
      padding: 20px;
    }
  }

  .group-box {
    display: flex;
    flex-direction: column;

    .group-header {
      padding: 3px;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      background-color: white;
      border-bottom: 1px #ddd solid;
    }

    .group-container {
      padding: 20px;
      flex: 1;

      .group-info {
        display: flex;
        padding: 5px 20px;

        .group-form {
          flex: 1;
          padding-left: 40px;
          max-width: 700px;
        }

        .avatar-uploader {
          text-align: left;

          .el-upload {
            border: 1px dashed #d9d9d9 !important;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }

          .el-upload:hover {
            border-color: #409EFF;
          }

          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
          }

          .avatar {
            width: 200px;
            height: 200px;
            display: block;
          }
        }

        .send-btn {
          margin-top: 20px;
        }
      }

      .group-member-list {
        padding: 5px 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-size: 16px;
        text-align: center;

        .groupME {
          margin: 5px;

          .group-member {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50px;



            .btn-kick {
              display: none;
              position: absolute;
              right: -8px;
              top: -8px;
              color: darkred;
              font-size: 20px;
              cursor: pointer;
            }

            &:hover .btn-kick {
              display: block;
              color: #ce1818;
            }
          }

          .member-name {
            font-size: 12px;
            text-align: center;
            width: 50px;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden
          }
        }


        .group-invite {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 50px;
          margin: 5px;

          .invite-member-btn {
            width: 100%;
            height: 50px;
            line-height: 50px;
            border: #cccccc solid 1px;
            font-size: 25px;
            cursor: pointer;
            box-sizing: border-box;

            &:hover {
              border: #aaaaaa solid 1px;
            }
          }

          .invite-member-text {
            font-size: 16px;
            text-align: center;
            width: 100%;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden
          }
        }

      }
    }
  }
}
</style>